.div1{
	background-color: aqua;
	width: 100px;
	height: 100px;
	color: aliceblue;
}
// 说明变量
// 全局变量
$minHeight:200px;
$maxWidth:200px;
$mainColor:pink;
.div2{
	width: $maxWidth;
	height: $minHeight;
	color: $mainColor;
	background-color: bisque;
	$content:"我是张宇" !global;//局部变量,!global可以变全局变量
	.title::before{
		content: $content;
	}
}

.message{
	width: $maxWidth;
	height: $minHeight;
	border: 1px solid black;
	background-color: pink;
}
//选择器嵌套----父选择器&符号-----&符号用于选择器拼接
.div3{
	@extend .message;//继承Sacc模块继承可以挺过@extent语法实现
	&_child{
		@extend .div1;
		transition: all 0.5s ;
		&:hover{
			transition: all 0.5s ;
			background-color: red;
		}
	}
}
$color1:pink;
$color2:red;
$num:100;
$color:color;
.div4{
	width: $maxWidth;
	height: $minHeight;
	@if true and false{
		background-#{$color}: $color1;//差值语句# {}
	}@else{
		background-#{$color}: $color2;
	}
	content: aaa+"aaa";
}

//@for $i from <start> to <end> 包前不包后 $i可以是任何变量
//@for $i from <start> through <end> 包前包后
@for $var from 3 to 6{
	.a#{$var}{
		background-color: aquamarine;
	}
}
@for $var from 3 through 6{
	.b#{$var}{
		background-color: aquamarine;
	}
}

// @each $i in $list $i可以是任何变量,$list是一串的值，也就是值的列表
// $list:1 2 3 4;
// $list2:red blue;
// @each $i in $list{
// 	$index:index($list,$i);//$index:index($list,$i)获取下标
// 	.p#{$index - 1}{
// 		background-color: aquamarine;
// 		width: 100px * $i;
// 	}
// }

// @each $i in $list2{
// 	$index:index($list2,$i);//$index:index($list,$i)获取下标
// 	.p#{$index - 1}{
// 		background-color: $i;
// 	}
// }

//
$const:10;
@while $const > 0 {
	.p#{$const}{
		width: 100px;
	}
	$const:$const - 1;//必须加上不然是死循环
}
//@import支持多文件导入，用','隔开,允许导入scss或sass
@import './common.scss';
body{
	background-color: $themeColor;
}

//mixin混入指令用于定义重复使用的样式，它可以包含所有长css规则，绝大部分scss规则
//甚至可以通过参数功能引入变量，输出多样化的样式
//@mixin mixin-name(){css样式声明} 使用 @include mixin-name()
@mixin message($fontSize,$color,$textAlign,$lineHeight,$padding) {
	font-size: $fontSize;
	color: $color;
	text-align: $textAlign;
	line-height: $lineHeight;
	padding: $padding;
}

.message1{
	@include message(12px,red,10px,10px,10px)
}

//@function
@function sum($a,$b){
	@return $a + $b
}

a{
	width: sum(10,10);
}


